<template>
    <div class="news">
        <!--导航区-->
        <ul>
            <li v-for="news in newsList" :key="news.id">
                <RouterLink 
                    :to="{path :'/news/detail',
                        query:{
                            id:news.id,
                            title:news.title,
                            content:news.content
                        }
                    }"
                >
                    {{ news.title }}
                </RouterLink>
            </li>
        </ul>
        <!--展示区-->
        <div class="new-content">
            <RouterView></RouterView>     
        </div>
    </div>
</template>

<script setup lang="ts" name="News">
    import { reactive } from 'vue'
    import { RouterView,RouterLink } from 'vue-router';

    const newsList =reactive([
        {id:'01',title:'新闻1',content:'新闻1内容'},
        {id:'02',title:'新闻2',content:'新闻2内容'},
        {id:'03',title:'新闻3',content:'新闻3内容'},
        {id:'04',title:'新闻4',content:'新闻4内容'}
    ])
</script>

<style scoped>
.news{
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    height: 100%;
}
.news ul{
    margin-top: 30px;
    list-style: none;
    padding-left: 10px;
}
.news li>a{
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0,84,0);
}
.news-content{
    width: 70%;
    height: 90%;
    border: 1px solid;
    margin-top: 20px;
    border-radius: 10px;
}
</style>